<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner"  margin-top:12px;  /> -->

    <!-- <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="17"> 
        <div style="display: flex; justify-content: space-between">
          <listAll @getsalesGrade="getsalesGrade" />
        </div>
      </el-col>

      <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col>
    </el-row>-->
    <!-- <div style="display: flex; justify-content: space-around"> -->
    <listAll
      :salesGrade="salesGrade"
      @getsalesGrade="getsalesGrade"
      style="top: 6px; z-index: 9999; position: fixed"
      v-if="activeName == 0"
    />
    <listAlltwo
      :salesGrade="salesGrade"
      @getsalesGrade="getsalesGrade"
      style="top: 6px; z-index: 9999; position: fixed"
      v-if="activeName == 1"
    />

    <date
      style="top: 6px; z-index: 9999; position: fixed; right: 200px"
      v-model="valueTime"
      :type.sync="groupType"
      @handleChangeTime="handleChangeTime($event)"
    ></date>
    <!-- </div> -->
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="订单数据大屏" name="0">
        <I
          v-if="activeName == 0"
          :timeObj="timeObj"
          :salesGrade="salesGrade"
        ></I>
      </el-tab-pane>
      <el-tab-pane label="达人数据看板" name="1">
        <II
          v-if="activeName == 1"
          :timeObj="timeObj"
          :salesGrade="salesGrade"
        />
      </el-tab-pane>
      <el-tab-pane label="商品成本利润核算" name="2">
        <III v-if="activeName == 2" :timeObj="timeObj" />
      </el-tab-pane>
      <!-- <el-tab-pane label="单品评论分析" name="3">
        <IV v-if="activeName == 3" :query="query" />
      </el-tab-pane> -->
      <!--<el-tab-pane label="产品层级分析" name="4">
        <V v-if="activeName == 4" :query="query" />
      </el-tab-pane>
      <el-tab-pane label="销售类目分析" name="5">
        <VI v-if="activeName == 5" :query="query" />
      </el-tab-pane>
      <el-tab-pane label="销售结构分析" name="6">
        <VII v-if="activeName == 6" :query="query" />
      </el-tab-pane>
      <el-tab-pane label="销售Top同期单品分析" name="7">
        <IX v-if="activeName == 7" :query="query" />
      </el-tab-pane>
       -->
    </el-tabs>
  </div>
</template>

<script>
import date from "./common/date";
import listAll from "./common/listAll";
import listAlltwo from "./common/listAlltwo";
import I from "@/views/live/admin/index.vue";
import II from "@/views/live/goods/index.vue";
import III from "@/views/live/order/index.vue";
// import IV from "./IV.vue";
// import V from "./V.vue";
// import VI from "./VI.vue";
// import VII from "./VII.vue";
// import IX from "./IX.vue";
export default {
  //   name: "productSale",
  dicts: [
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
  ],
  components: {
    date,
    listAll,
    listAlltwo,
    I,
    II,
    III,
    // IV,
    // V,
    // VI,
    // VII,
    // IX,
  },
  data() {
    return {
      salesGrade: ["VFU"],
      activeName: 0,

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",
      //时间控件
      timeObj: {
        salesGrade: [],
        // dateType: "近30天",
        startTime: "",
        endTime: "",
        dateType: "",
      },

      query: {
        salesGrade: [],
        // dateType: "近30天",
        startDate: "",
        endDate: "",
        dateType: "",
        // channelType: "shop",
      },
      // 店铺
      cascadeList: [],
      //

      typeArr: [
        { value: "brand", label: "品牌" },
        { value: "channel", label: "渠道" },
        { value: "shop", label: "店铺" },
      ],

      //
      barChartData: {
        columns: [],
        rows: [],
      },
    };
  },
  // watch: {
  //   timeObj: {
  //     handler: function (newnew, oldold) {
  //       //       // this.getselectSaleTargetList("salesQuantity");
  //       //       // this.getcategoryTargetYieldRate();
  //       if (JSON.stringify(this.timeObj) != "{}") {
  //         //         // this.getselectCommentsDistributionOne();
  //         this.timeObj = newnew;
  //       }
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  methods: {
    handleClick(tab, event) {
      //   if (tab.index == "1") {
      //     this.query.channelType = "shop";
      //   } else {
      //     delete this.query.channelType;
      //   }
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      if (!timeObj.endTime) {
        return;
      }
      this.timeObj = timeObj;
      // this.timeObj.startTime = timeObj.startTime;
      // this.timeObj.endTime = timeObj.endTime;
      // this.timeObj.dateType = timeObj.dateType;
      //   console.log(JSON.stringify(this.query));
    },
    //
    getsalesGrade(type) {
      console.log(JSON.stringify(type));
      this.salesGrade = type;
      // this.$emit("handleChange", type);
      // this.timeObj.salesGrade = type;
      // if (type.length == 1) {
      //   this.query.channelType = "brand";
      // } else if (type.length == 2) {
      //   this.query.channelType = "channel";
      // } else if (type.length == 3) {
      //   this.query.channelType = "shop";
      // }
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载数据，请稍候！");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tabs--card {
  height: calc(100vh - 110px);
  /* overflow-y: auto; */
}
.el-tab-pane {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
::v-deep .el-tabs__content {
  /* height: 185px;
  border-radius: 4px; */
  //   background-color: rgb(240, 242, 245) !important; /* 使用你想要的蓝色 */
}
.el-dialog-div {
  height: 100vh;
  overflow-x: hidden;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  // padding: 32px;
  //   background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
// .train-tree-cascader {
//   height: 500px !important;
// }

// .el-scrollbar__wrap {
//   overflow: initial !important;
// }
</style>
